<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">

    <div class="row">
        <div class="col-md-12">

            <div class="panel panel-default tabs">
                <ul class="nav nav-tabs nohref" role="tablist">
                    <li style="min-width: 150px;" ng-class="{'active':'tabInfo' == currentTabId}" ng-click="selectTab('tabInfo')">
                        <a href="javascript:void(0)" role="tab" data-toggle="tab">{{'基本信息' | dyLanguage}}</a>
                    </li>
                    <li style="min-width: 150px;" ng-class="{'active':'tabCourseRoute' == currentTabId}" ng-click="selectTab('tabCourseRoute')">
                        <a href="javascript:void(0)" role="tab" data-toggle="tab">{{'节点列表' | dyLanguage}}</a>
                    </li>
                </ul>
                <div class="panel-body tab-content">
                    <div class="tab-pane" ng-class="{'active':'tabInfo' == currentTabId}" id="tabInfo">
                        <div class="panel panel-default">
                            <div class="panel-body table-responsive">
                                <div class="row">
                                    <div>
                                        <form class="form-horizontal" name="validForm" novalidate>
                                            <div class="panel-default">
                                                <div class="panel-footer" style="text-align: right;">
                                                    <h3 class="panel-title" style="float: left;"><strong>{{'当前页面的操作' | dyLanguage}}</strong></h3>
                                                    <button class="btn btn-info" ng-click="saveRoute()"><i class="fa"></i>{{'保存' | dyLanguage}}</button>
                                                </div>
                                                <div class="panel-body panel-dialog">
                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">{{'主图' | dyLanguage}}</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="profile-image">
                                                                <img style="cursor: pointer; width: 50px; height: 100px;" ng-src="{{learningMapRouteDetail.picture | faceUrl}}" ngf-select ngf-change="uploadImage($files)" ngf-pattern="'image/*'"
                                                                     ngf-accept="'image/*'" ngf-max-size="20MB"
                                                                     ngf-min-height="100"/>
                                                            </div>
                                                            <span class="help-block">{{'请上传图片' | dyLanguage}}&nbsp;<i style="cursor: pointer; "><span ng-show="showPictureProgress">({{pictureProgress.value}}%)</span></i></span>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">{{'名称' | dyLanguage}}</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                                                <input type="text" class="form-control" name="name" ng-model="learningMapRouteDetail.name" required/>
                                                            </div>
                                                            <span class="help-block" ng-show="(validForm.name.$untouched && !validForm.$submitted) || validForm.name.$valid">{{'请输入名称' | dyLanguage}}</span>

                                                            <div ng-show="(validForm.name.$touched || validForm.$submitted ) && validForm.name.$invalid">
                                                                <span class="error-block" ng-show="validForm.name.$error.required">{{'必输选项' | dyLanguage}}</span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">{{'宽度' | dyLanguage}}</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                                                <input type="number" class="form-control" name="width" ng-model="learningMapRouteDetail.width" required/>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-md-3 col-xs-12 control-label">{{'高度' | dyLanguage}}</label>

                                                        <div class="col-md-6 col-xs-12">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                                                <input type="text" class="form-control" name="height" ng-model="learningMapRouteDetail.height" required/>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="panel-footer" style="text-align: right;">
                                                    <h3 class="panel-title" style="float: left;"><strong>{{'当前页面的操作' | dyLanguage}}</strong></h3>
                                                    <button class="btn btn-info" ng-click="saveRoute()"><i class="fa"></i>{{'保存' | dyLanguage}}</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="tab-pane" ng-class="{'active':'tabCourseRoute' == currentTabId}" id="tabCourseRoute">
                        <div class="panel panel-default">
                            <div class="panel-body table-responsive">
                                <div class="panel-footer" style="text-align: right;">
                                    <h3 class="panel-title" style="float: left;"><strong>{{'当前页面的操作' | dyLanguage}}</strong></h3>
                                    <button class="btn btn-info" ng-click="addCourseRoute()"><i class="fa fa-plus"></i>{{'新增' | dyLanguage}}</button>
                                    <button class="btn btn-info" ng-click="saveCourseRoute()"><i class="fa fa-plus"></i>{{'保存' | dyLanguage}}</button>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- START BASIC TABLE SAMPLE -->
                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <p>{{'所有节点的列表' | dyLanguage}}</p>
                                                <table class="table table-striped table-bordered">
                                                    <thead>
                                                    <tr>
                                                        <th>{{'编码' | dyLanguage}}</th>
                                                        <th width="30%"></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="courseRoute in courseRoutes | orderBy:['sort']" ng-style="courseRoute.tr">
                                                        <td ng-style="courseRoute.tr">
                                                            <a href="javascript:void(0)" ng-click="selectCourseRoute(courseRoute)">{{'节点：' | dyLanguage}}{{courseRoute.sort}}-({{'坐标轴：' | dyLanguage}}{{courseRoute.x}},{{courseRoute.y}})</a>
                                                        </td>
                                                        <td ng-style="courseRoute.tr">
                                                            <div ng-show="courseRoute.uid == currentCourseRoute.uid">
                                                                <a href="javascript:void(0)" ng-click="removeCourseRoute(courseRoute, $index)">{{'移除' | dyLanguage}}</a>
                                                                &nbsp;&nbsp;|&nbsp;&nbsp;
                                                                <a href="javascript:void(0)" ng-click="editCourseRoute(courseRoute)">{{'编辑' | dyLanguage}}</a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <!-- START BASIC TABLE SAMPLE -->
                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <img ng-src="{{learningMapRouteDetail.picture | faceUrl}}" width="400px" ng-click="changeCourseRoute($event)" ng-style="studyMapRouteStyle_pictureStyle"/>

                                                <div style="position: absolute; top: 15px;" ng-repeat="record in courseRoutes | orderBy:['sort']">
                                                    <img ng-src="{{record.courseRouteImg.img}}" ng-click="changeCourseRouteImg($event)" style="position: absolute;" ng-style="record.courseRouteImg" width="50px">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-footer" style="text-align: right;">
                                    <h3 class="panel-title" style="float: left;"><strong>{{'当前页面的操作' | dyLanguage}}</strong></h3>
                                    <button class="btn btn-info" ng-click="addCourseRoute()"><i class="fa fa-plus"></i>{{'新增' | dyLanguage}}</button>
                                    <button class="btn btn-info" ng-click="saveCourseRoute()"><i class="fa fa-plus"></i>{{'保存' | dyLanguage}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END PAGE CONTENT WRAPPER -->
</div>
